<!--
 * @Descripttion: 使用方法：<upload :pic_name="'pic_name'"></upload>
 * @version: 1.0.1
 * @Author: daipeng
 * @Date: 2020-08-20 17:18:52
 * @LastEditors: daipeng
 * @LastEditTime: 2020-09-16 17:03:59
-->
<template>
    <div :class="overflow?'wrap_img_upload':''">
        <el-upload
            action
            :before-upload="beforeAvatarUpload"
            :http-request="handleUpload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :before-remove="beforeRemove"
            multiple
            :file-list="fileList"
            :list-type="listType"
        >
            <!-- :limit="limit"
            :on-exceed="handleExceed"-->
            <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
    </div>
</template>

<script>
import { put, getFileNameUUID } from "@/common/aliyun.oss.client";

export default {
    name: "Upload",
    props: {
        limit: {
            type: Number,
            default: 1,
        },
        action: {
            type: String,
            default: "",
        },
        headers: {
            type: Object,
            default: () => {},
        },
        pic_name: {
            type: String,
            default: "",
        },
        overflow: {
            type: Boolean,
            default: true,
        },
        name: {
            type: String,
            default: "",
        },
        listType: {
            type: String,
            default: "picture-card",
        },
    },
    data() {
        return {
            head_url: "https://img.zhongfuyun.com/",
            fileList: [],
            dialogImageUrl: "",
            dialogVisible: false,
        };
    },
    methods: {
        handleRemove(file, fileList) {
            this.fileList = [];
        },
        handlePreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleExceed(files, fileList) {
            //文件超出个数限制时的钩子触发函数，limit限制数量
            this.$message.warning(`每次只能上传 ${this.limit} 个文件`);
        },
        beforeRemove(file, fileList) {
            //移除图片
            this.fileList = [];
            // return this.$confirm(`确定移除 ${file.name}？`);
        },
        handleSuccess(response, file, fileList) {
            this.fileList = fileList;
            this.$emit("on-success", file, fileList);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg";

            if (!isJPG) {
                this.$message.error("上传格式只能是 JPG !");
            }
            return isJPG;
        },
        /**
         * 自定义上传方法
         */
        handleUpload(option) {
            // 生成的文件名称
            let objName = getFileNameUUID();
            // console.log(option);
            // console.log(objName);
            var that = this;
            // 调用 ali-oss 中的方法
            put(`${objName}`, option.file).then((res) => {
                // console.log(res); //返回的文件信息
                this.fileList.push({
                    pic_name: this.pic_name,
                    name: res.name,
                    url: this.head_url + res.name,
                });
                // 传递数据到父组件
                that.sendMsg(res.name);
            });
        },
        //子向父传值
        sendMsg(url) {
            this.$emit("func", url);
        },
    },
};
</script>

<style scoped>
.wrap_img_upload {
    width: 148px;
    height: 148px;
    overflow: hidden;
}
</style>



// WEBPACK FOOTER //
// src/components/components/Upload.vue